<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
   具名插槽    给插槽起名字    name   实现内容的分发

   组件间参数的传递：
   1.  props   自定义事件  this.$emit('自定义事件名',参数)
   2. 插槽
-->
<div id="app">
    <layout>
        <!--        v-slot:header   template 中的内容需要渲染在name=header的插槽中-->
        <template v-slot:header>
            <p>{{message}}</p>
        </template>

        <!--      v-slot:main  简化写法   #main    -->
        <template #main>
            <p>这是插槽内容2</p>
        </template>

        <template v-slot:footer>
            <p>这是插槽内容3</p>
        </template>

        <p>这是一个默认内容</p>
        <button>普通按钮</button>

    </layout>
</div>

<script>
    let layout = {
        template: `
            <div>
                <div id="header">
                    <slot name="header"></slot>
                </div>
                <div id="main">
                    <slot name="main"></slot>
                </div>
                <div id="footer">
                    <slot name="footer"></slot>
                </div>
                <div>
                  <slot name="default"></slot>
                </div>
            </div>
        `
    }
    let vm = new Vue({
        el: '#app',
        data: {
            message:'hello slot'
        },
        methods: {},
        components: {
            layout
        }
    })
</script>

</body>
</html>
